import React, {Component} from 'react'
import {Divider, Popconfirm, Table} from 'antd'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import {deleteNote, getMyNotes} from '../../../actions/quizNote'
import getQuizType from '../../../constant/quiz-type-app-address'
import {FormattedMessage} from 'react-intl'

class MyStudentQuizNoteListBox extends Component {
  componentWillMount () {
    this.props.getMyNotes(this.props.programId)
  }

  deleteNote (noteId) {
    this.props.deleteNote(noteId, this.props.programId)
  }

  goStudentQuizPage (programId, taskId, studentId, assignmentId, quizId, quizType) {
    const addressSuffix = getQuizType(quizType)
    const address = `/learn${addressSuffix}`
    return `${address}/tutor/program/${programId}/task/${taskId}/student/${studentId}/assignment/${assignmentId}/quiz/${quizId}`
  }

  render () {
    const columns = [
      {
        title: <FormattedMessage id='任务卡名称' />,
        dataIndex: 'taskTitle',
        key: 'taskTitle'
      },
      {
        title: <FormattedMessage id='作业名称' />,
        dataIndex: 'assignmentTitle',
        key: 'assignmentTitle'
      },
      {
        title: <FormattedMessage id='学员名称' />,
        dataIndex: 'studentName',
        key: 'studentName'
      },
      {
        title: <FormattedMessage id='备注' />,
        dataIndex: 'noteContent',
        key: 'noteContent'
      },
      {
        title: <FormattedMessage id='操作' />,
        dataIndex: 'option',
        key: 'option',
        render: (text, record) => (
          <span>
            <a href={this.goStudentQuizPage(record.programId, record.taskId, record.studentId, record.assignmentId, record.quizId, record.quizType)}><FormattedMessage id='查看题目' /></a>
            <Divider type='vertical' />
            <Popconfirm title={<FormattedMessage id='确定删除吗' />}
              okText={<FormattedMessage id='确定' />}
              cancelText={<FormattedMessage id='取消' />}
              onConfirm={this.deleteNote.bind(this, record.id)}>
              <a><FormattedMessage id='删除' /></a>
            </Popconfirm>
          </span>
        )
      }
    ]

    const {myNotes} = this.props
    return <Table dataSource={myNotes} columns={columns} />
  }
}

const mapStateToProps = ({myNotes, user}) => ({
  myNotes, user
})

const mapDispatchToProps = dispatch => ({
  getMyNotes: (programId) => dispatch(getMyNotes(programId)),
  deleteNote: (noteId, programId) => dispatch(deleteNote(noteId, programId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MyStudentQuizNoteListBox))
